<template>
  <div style="width:100%;">
        <div class="deliveryTime" style="font-size:.65rem;margin:0;border-top: 1px solid #E3E3E5;border-bottom: 1px solid #E3E3E5;padding-left:2.5%;" v-if="deliveryTime">
            <i class="icon njfont nj-daisonghuo" style="display:inline-block;"></i>
            <span style="display:inline-block;margin:0;margin-left: 7px;">
                现在下单，预计最快{{deliveryTime}}&nbsp;{{formatTime(startBookTm).split(" ")[1].split(":")[0]}}:{{formatTime(startBookTm).split(" ")[1].split(":")[1]}}~{{formatTime(endBookTm).split(" ")[1].split(":")[0]}}:{{formatTime(endBookTm).split(" ")[1].split(":")[1]}}&nbsp;送达
            </span>
            <i class="icon njfont nj-tishi" style="font-size: .7rem;" @click="showProduceTime" v-if="Boolean(distributionprocessingtime)"></i>
        </div>
        <cart-mode ref="produceTime" buttonText="关闭" :height="'9rem'" class="interpret">
            <p style="color: #353535;font-size:.75rem;padding: .6rem;">服务说明</p>
            <p style="text-align:left;padding: 0 .75rem;color: #8B8B8B;">•&nbsp;需要准备{{distributionprocessingtime}}分钟</p>
            <p style="text-align:left;padding: 0 .75rem;color: #8B8B8B;">•&nbsp;为了给您提供更好的商品和服务体验，我们需要时间准备该商品，给您带来的不便，请谅解。</p>
        </cart-mode>
  </div>
</template>
<script>
import CartMode from '@/real-components/CartMode';
export default {
    props: {
        deliveryTime: '',
        startBookTm: '',
        endBookTm: '',
        distributionprocessingtime: ''
    },
    data () {
        return {
            
        }
    },
    components: {
        CartMode
    },
    methods: {
        add0(m){
            return m < 10 ? '0' + m : m
        },
        formatTime(timer){
            //时间戳是整数，否则要parseInt转换
            var time = new Date(timer);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
        },
        //显示生产时间
        showProduceTime (){
            this.$refs.produceTime && this.$refs.produceTime.showModle();
        },
    }
}
</script>
<style scoped>
    .deliveryTime {
        text-align: left;
        height: 1.5rem;
        margin-left: .65rem;
        margin-top: -1px !important
    }
    .deliveryTime span {
        padding: 0;
        margin-top: -0.1rem;
    }
    .deliveryTime i {
        margin-top: .2rem;
    }
    .deliveryTime {
        font-size: .65rem;
        margin: 0;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #E3E3E5;
        padding: 0.2rem 0.75rem;
        height: 2rem
    }
    .deliveryTime i {
        color: #299a28
    }
</style>
